<template>
    <div>
        <div class="banner" @click="handleGallaryClick">
            <img :src="bannerImg" alt="">
            <div class="banner-info">
                <div class="banner-title">
                    {{sightName}}</div>
                <div class="banner-number">
                    <span class="iconfont icon-more">&#xe64a;</span>  
                    <span>{{gallaryImgs.length}}</span>
                </div>
            </div>
        </div>
        <!-- <fade-animation> -->
          <detail-gallary v-show="showGallary" @close='handleGallaryClose'>
          </detail-gallary>
        <!-- </fade-animation> -->
    </div>
</template>
<script>
import DetailGallary from '@/common/gallary/Gallary'
// import FadeAnimation from '@/common/fade/fadeAnimation'
import { ref } from 'vue'
export default {
  name: 'Banner',
  props: {
    bannerImg: {
      type: String
    },
    sightName: {
      type: String
    },
    gallaryImgs: {
      type: Array
    }
  },
  components: {
    DetailGallary,
    // FadeAnimation
  },
  setup(){
    let showGallary = ref(false)
    function handleGallaryClick () {
      showGallary.value = true
    }
    function handleGallaryClose () {
      showGallary.value = false
    }
    return { handleGallaryClick, handleGallaryClose, showGallary }
  } 
}
</script>
<style lang="stylus" scoped>
.banner
    position relative
    width 100%
    height 0
    padding-bottom 55%
    overflow hidden
    img
        width 100%
    .banner-info
        color #fff
        width 100%
        height .6rem
        line-height .6rem
        position absolute
        bottom 0
        left 0
        right 0
        display flex
        background linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
        .banner-title
            font-size .32rem
            flex 1
            padding 0 .2rem
        .banner-number
            font-size .2rem
            border-radius .2rem
            background rgba(0,0,0,.8)
            padding-right .4rem
            .icon-more
              font-size .2rem
              margin-right .05rem
</style>
